<template>
	<div class="best-wrap">
		<module-title title="基础信息">
			<el-button type="primary" @click="onSubmit">保存基础信息</el-button>
		</module-title>
		<el-form
			class="the-form"
			label-width="100px"
			label-suffix="："
			:model="formData"
			ref="form"
		>
			<el-form-item v-if="!isBatch" label="课件名称" :required="true">
				<div class="name-item">
					第
					<el-form-item
						prop="sectionNumber"
						class="section"
						:rules="[{ required: true, message: '请输入节数', trigger: 'blur' },
							{ pattern: /^[0-9]+$/, message: '只能纯数字', trigger: 'blur' }]"
					>
						<el-input v-model="formData.sectionNumber" :maxlength="4" />
					</el-form-item>节课
					<el-form-item
						v-if="hasName"
						prop="name"
						class="name"
					>
						<el-input
							v-model="formData.name"
							placeholder="请输入课件名称"
							:maxlength="80"
							:show-word-limit="true"
						/>
					</el-form-item>
				</div>
			</el-form-item>
			<div v-if="!isBatch" class="file-msg-box flex-box">
				<el-form-item
					class="left-width"
					label="文件名称"
					prop="sourceFileName"
					:rules="{ required: true, message: '请输入文件名称', trigger: 'change' }"
				>
					<el-input v-model="formData.sourceFileName" style="width: 280px;" />
				</el-form-item>
				<span class="title">vid：</span>
				{{ formData.videoVid }}
			</div>
			<div class="flex-box">
				<el-form-item
					class="left-width"
					label="授课老师"
					prop="teacherId"
					:rules="{ required: true, message: '请选择授课老师', trigger: 'change' }"
				>
					<select-teacher v-model="formData.teacherId" ref="selectTeacher" class="w-max" />
				</el-form-item>
				<el-form-item v-if="!isBatch" label="是否直播回放" prop="livePlaybackState">
					<el-radio v-model="formData.livePlaybackState" label="Y">是</el-radio>
					<el-radio v-model="formData.livePlaybackState" label="N">否</el-radio>
				</el-form-item>
			</div>
		</el-form>
	</div>
</template>

<script>
	import SelectTeacher from "@rc/pages/components/async/select-teacher.vue";
	import ModuleTitle from "./module-title.vue";

	export default {
		props: {
			// 是否为批量编辑(批量编辑的表单项有差异)
			isBatch: {
				type: Boolean,
				default: false
			},
			// 是否需要“课件名称”字段
			hasName: {
				type: Boolean,
				default: true
			},
			// 回显初始化需要的数据
			defaultData: {
				type: Object,
				default: () => ({
					sectionNumber: "", // 节数
					name: "", // 视频资源名称
					sourceFileName: "", // 源文件名称
					teacherId: "", // 授课老师标识
					userName: "", // 授课老师名称
					livePlaybackState: "N" // 是否直播回放
				})
			}
		},
		components: { SelectTeacher, ModuleTitle },
		data() {
			return {
				teacherOptions: [], // 授课老师搜索列表
				formData: {} // 当前表单的绑定变量
			};
		},
		watch: {
			defaultData: {
				handler(val) {
					this.formData = JSON.parse(JSON.stringify(val));
				},
				immediate: true
			}
		},
		methods: {
			onSubmit() {
				this.$refs.form.validate((isValid) => {
					if (!isValid) {
						return false;
					}
					const params = JSON.parse(JSON.stringify(this.formData));
					const itemsDetail = {
						teacher: this.$refs.selectTeacher.api_getOptions().find((i) => i.teacherId === params.teacherId) // 选中的授课老师详情
					};
					this.$emit("submit", params, itemsDetail);
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.w-max {
		width: 100%;
	}
	.best-wrap {
		padding: 0 20px 4px;
		background: #fff;
		border-radius: 2px;
	}

	.the-form {
		border-top: 1px dashed #f0f0f0;
		padding-top: 16px;
		/deep/ .el-form-item {
			margin-bottom: 16px;
		}
        /deep/ .el-form-item__label {
            padding-right: 0;
        }
	}

	.name-item {
		display: flex;

		.section {
			margin-bottom: 0;
			width: 70px;
			margin: 0 6px;
		}
		.name {
			margin-bottom: 0;
			flex-grow: 1;
			margin-left: 14px;
		}
	}

	.file-msg-box {
		white-space: nowrap;
		line-height: 22px;
		margin-bottom: 16px;
		overflow: hidden;
		text-overflow: ellipsis;
		.title {
            margin-left: 26px;
		}
	}

	.flex-box {
		display: flex;

		.left-width {
			width: 380px;
			margin-right: 30px;
		}
        /deep/ .el-radio {
            margin-right: 15px;
        }
	}
</style>
